<template>
  <div class="mvrangkList">
    <div class="updateTime" v-if="songList">
      <p>更新时间：{{mydate(songList.updateTime)}}</p>
    </div>
    <div
      class="songsList"
      v-for="(item,index) in songList.data"
      :key="item.id"
      @click="goDetails(item.id,item.artistId)"
    >
      <div class="songImg">
        <img :src="item.cover" />
        <span class="mark">
          <i class="iconfont icon-bofangsanjiaoxing"></i>
          {{item.playCount}}万
        </span>
      </div>
      <div class="content_text">
        <span class="number" :class="{'active':index<3}">{{index+1}}</span>
        <div class="name">
          <p>{{item.name}}</p>
          <span>{{item.artistName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  components: {},
  props: ["songList"],
  data() {
    return {
      //   songList: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    mydate: util.transformDate2,
    goDetails(id, artistId) {
      this.$router.push({
        name: "mvdetails",
        params: {
          id: id,
          artistId: artistId
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";

.mvrangkList {
     z-index: -1;
  .updateTime {
    width: 100%;
    padding: vw(20) vw(10) vw(10);
    p {
      font-size: vw(16);
      font-weight: bold;
    }
  }
  .songsList {
    width: vw(320);
    margin: 0 auto;
    margin-bottom: vw(10);
    .songImg {
      width: vw(324);
      height: vw(178);
      overflow: hidden;
      border-radius: vw(20);
      position: relative;
      img {
        width: 100%;
      }
      .mark {
        position: absolute;
        top: vw(6);
        right: vw(10);
        color: #fff;
        font-size: vw(12);
      }
    }
    .content_text {
      width: 100%;
      display: flex;
      margin-top: vw(10);
      .number {
        font-size: vw(20);
        font-weight: bold;
        padding-right: vw(10);
        color: #777;
      }
      .active {
        color: red;
      }
      .name {
        font-size: vw(16);

        p {
          font-weight: bold;
          padding: vw(2) 0;
        }
        span {
          font-size: vw(14);
          color: #333;
        }
      }
    }
  }
}
</style>